<template>
  <div ref="editorRef" :style="{ border: 'none',}">
    <div class="editor-wrapper">
      <div ref="editorRefInner"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import E from 'wangeditor';
import { marked } from 'marked';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '1100px' // 默认宽度
  },
  height: {
    type: String,
    default: '300px' // 默认高度为 500px
  }
});

const emit = defineEmits(['update:modelValue']);

const editorRef = ref(null);
const editorRefInner = ref(null);
const editor = ref(null);
const editorWidth = ref(props.width);
const editorHeight = ref(props.height);

// 监听父容器尺寸变化
const updateEditorSize = () => {
  if (editorRef.value) {
    const dialogBody = editorRef.value.closest('.el-dialog__body');
    if (dialogBody) {
      const bodyWidth = dialogBody.offsetWidth;
      const bodyHeight = dialogBody.offsetHeight;

      // 强制最小尺寸，非最大化时固定宽度为 1115px
      if (bodyWidth < 1100 || bodyHeight < 500) {
        editorWidth.value = '1100px'; // 强制固定宽度
        editorHeight.value = '500px';
      } else {
        // 最大化时，填充父容器
        editorWidth.value = '100%';
        editorHeight.value = '100%';
      }

      // 强制应用样式
      editorRef.value.style.width = editorWidth.value;
      editorRef.value.style.height = editorHeight.value;
    }
  }
};

// 使用 ResizeObserver 监听尺寸变化
let resizeObserver = null;
onMounted(() => {
  nextTick(() => {
    nextTick(() => {
      if (editorRefInner.value) {
        // 强制初始化尺寸
        // updateEditorSize();

        editor.value = new E(editorRefInner.value);
        editor.value.config.onchange = (html) => {
          emit('update:modelValue', html);
        };
        editor.value.config.uploadImgShowBase64 = true;
        editor.value.config.height = 300; // 强制设置 wangeditor 内部高度
        editor.value.config.zIndex = 100;
        editor.value.create();

        if (props.modelValue) {
          editor.value.txt.html(marked.parse(props.modelValue) || '');
        }

        // 监听父容器尺寸变化
        const dialogBody = editorRef.value.closest('.el-dialog__body');
        if (dialogBody) {
          resizeObserver = new ResizeObserver(() => {
            // updateEditorSize();
          });
          resizeObserver.observe(dialogBody);
        }
      }
    });
  });
});

onBeforeUnmount(() => {
  if (editor.value) {
    editor.value.destroy();
    editor.value = null;
  }
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
});

watch(
  () => props.modelValue,
  (newVal) => {
    if (editor.value && newVal !== editor.value.txt.html()) {
      editor.value.txt.html(marked.parse(newVal) || '');
    }
  }
);

watch(
  () => props.width,
  (newVal) => {
    updateEditorSize();
  }
);

watch(
  () => props.height,
  (newVal) => {
    updateEditorSize();
  }
);
</script>

<style scoped>
/* 外层容器，填充父容器 */
.editor-wrapper {
  border: 1px solid #ccc; /* 整体边框 */
  width: 100%;
  height: 100%; /* 填充父容器高度 */
  /* max-width: 1100px; 防止宽度超过 1115px */
  box-sizing: border-box; /* 确保边框包含在宽度和高度内 */
}

/* 工具栏样式 */
:deep(.w-e-toolbar) {
  border-bottom: 1px solid #ccc !important; /* 添加工具栏底部边框 */
  width: 100% !important;
  flex-wrap: wrap;
  background: #f1f1f1;
}

/* 内容区域样式 */
:deep(.w-e-text-container) {
  border: none !important; /* 移除内容区域边框 */
  width: 100% !important;
  /* height: calc(100% - 40px) !important; 填充剩余高度，减去工具栏高度 */
  overflow-y: auto; /* 内容区域接管滚动 */
  background: #fff;
  height: 300px; /* 确保内容区域最小高度：500px - 40px */
}

/* 隐藏内容区域滚动条 */
:deep(.w-e-text-container::-webkit-scrollbar) {
  display: none; /* 隐藏滚动条 */
}

/* 父容器样式 */
:deep(.el-dialog) {
  width: 1100px !important; /* 确保默认宽度 */
  min-width: 1100px !important; /* 防止缩小 */
  height: 300px !important; /* 确保默认高度足够：500px + 标题栏(60px) + 底部(40px) */
  margin: 0 auto !important; /* 居中 */
  display: flex;
  flex-direction: column;
  max-width: 1100px !important; /* 防止宽度扩展 */
}

:deep(.el-dialog.is-fullscreen) {
  width: 100% !important; /* 最大化时填满视口 */
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  max-width: none !important; /* 最大化时移除宽度限制 */
}

:deep(.el-dialog__header) {
  padding: 10px 20px !important; /* 确保标题栏高度固定 */
}

:deep(.el-dialog__body) {
  padding: 0 !important; /* 移除内边距 */
  margin: 0 !important; /* 移除外边距 */
  width: 100% !important;
  flex: 1 !important; /* 填充剩余空间 */
  box-sizing: border-box; /* 确保边框包含在高度内 */
  overflow-y: auto !important; /* 允许垂直滚动，但控制在 body 内 */
  overflow-x: hidden !important; /* 防止水平滚动 */
}

:deep(.el-dialog__footer) {
  padding: 10px 20px !important; /* 确保底部按钮区域高度固定 */
}

/* Markdown 样式 */
.w-e-text p {
  margin: 10px 0;
}
.w-e-text h2 {
  font-size: 1.5em;
  font-weight: bold;
}
.w-e-text ul {
  list-style-type: disc;
  margin-left: 20px;
}
.w-e-text h1 { font-size: 2em; margin: 0.67em 0; }
.w-e-text h2 { font-size: 1.5em; margin: 0.83em 0; }
.w-e-text ul { list-style: disc; padding-left: 2em; }
.w-e-text ol { list-style: decimal; padding-left: 2em; }
</style>